import React from 'react';
import { Wrap } from 'web-component';
import './demo1.less';

const Content: React.ReactNode[] = [
  '标签111',
  '标签222',
  '标签3333',
  '标签444',
  '标签55555',
  '标签66',
  '标签7777',
  '标签888',
].map((item, index) => {
  return (
    <span key={index} style={{ fontSize: '0.5rem', background: 'green' }}>
      {item}
    </span>
  );
});

export default () => {
  return (
    <div>
      <Wrap
        lineHeight={50}
        rows={1}
        spacing={15}
        runSpacing={5}
        className={'test'}
      >
        <span style={{ fontSize: '0.5rem', background: 'green' }}>单元素</span>
      </Wrap>
      <br />
      <div>最多展示1行</div>
      <Wrap lineHeight={50} rows={1} spacing={15} runSpacing={10}>
        {Content}
      </Wrap>
      <br />
      <div>最多展示2行</div>
      <Wrap lineHeight={50} rows={2} spacing={15} runSpacing={10}>
        {Content}
      </Wrap>
      <div>不限制行数</div>
      <Wrap lineHeight={50} spacing={15} runSpacing={10}>
        {Content}
      </Wrap>
    </div>
  );
};
